<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="box">
        <!-- 图片 -->
        <div class="img_box">
            <!-- 图片列表 -->
            <ul>
                <!-- 
                <li><a href=""><img src="./img/01.jpg" alt=""></a></li>
                <li><a href=""><img src="./img/02.jpg" alt=""></a></li>
                <li><a href=""><img src="./img/03.jpg" alt=""></a></li>
                <li><a href=""><img src="./img/04.jpg" alt=""></a></li>
                -->
            </ul>
            <!-- 左右箭头 -->
            <div class="arrow_left">&lt;</div>
            <div class="arrow_right">&gt;</div>
        </div>

        <!-- 小圆点 -->
        <div class="dot_box">
            <span class="dotActive" data-index=1></span>
            <span class="dot" data-index=2></span>
            <span class="dot" data-index=3></span>
            <span class="dot" data-index=4></span>
        </div>
    </div>

    <!-- <script src="./index.js"></script> -->
    <script src="./packageAjax.js"></script>
    <script>
        let box = document.querySelector(".box");
        let imgBoxUl = box.querySelector(".img_box > ul");
        let arrow_right = document.querySelector(".arrow_right");
        let dot_box = document.querySelector(".dot_box");
        let timer;

        ajax("GET","http://studentback.dfbuff.xyz/getMethod",function(res){
            res.result.forEach(function(item) {
                imgBoxUl.innerHTML += `<li><a><img src=${item.content}></a></li>`;
            });
            // 动态生成图片(第一张和最后一张)
            // console.log(imgBoxUl.firstElementChild.cloneNode(true));
            // console.log(imgBoxUl.lastElementChild.cloneNode(true));
            // 插入克隆的第一张图片到最后一张图片之后的位置
            imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
            // 插入克隆的第四张图片到第一张之前的位置
            imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);
            // 初始化下标
            let index = 1;
            // 获取上一个操作的index
            let lastIndex = 1;
            // 移动到原来第一张图片的位置
            imgBoxUl.style.transform = `translateX(-${index}00%)`;
            setTimeout(function () {
                imgBoxUl.style.transition = "0.2s ease-in-out";
            }, 300);
            let flag = true; // 设置开关, 默认可以打开

            // 事件代理
            box.addEventListener("click", function (event) {
                // 左箭头
                (event.target.className == "arrow_left") && arrowLeftFn(event.target);
                // 右箭头
                (event.target.className == "arrow_right") && arrowRightFn(event.target);
                // 小圆点
                (event.target.classList.contains("dot")) && dotFn(event.target);
            });

            // 点击右箭头事件
            function arrowRightFn(target) {
                if (flag) {
                    flagFn();
                    imgBoxUl.style.transform = `translateX(-${++index}00%)`;
                    // 判断是否到达最后一张
                    limit(imgBoxUl.children.length - 1, 1);
                    // 获取具体span标签
                    let rBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
                    dotColor(rBtnEvent);
                }
            }

            // 点击左箭头事件
            function arrowLeftFn(target) {
                if (flag) {
                    flagFn();
                    imgBoxUl.style.transform = `translateX(-${--index}00%)`;
                    // 判断是否是第一张
                    limit(0, imgBoxUl.children.length - 2);
                    // 获取具体span标签
                    let lBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
                    dotColor(lBtnEvent);
                }
            };

            // 临界点跳转图片
            function limit(limitIndex, setIndex) {
                // limitIndex 设置限制下标
                // setIndex   设置对于下标
                if (index == limitIndex) {
                    index = setIndex;
                    imgBoxUl.addEventListener("transitionend", function () {
                        // 清除过渡效果, 并且ul恢复位置
                        imgBoxUl.style.transition = "none";
                        imgBoxUl.style.transform = `translateX(-${index}00%)`;
                        // 恢复过渡效果
                        // 获取最终样式(被计算的样式)
                        window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition-duration");
                        imgBoxUl.style.transition = "0.2s ease-in-out";
                    })
                }
            }

            // 小圆点点击事件
            function dotFn(target) {
                // 获取自定义属性的值，这个值可以和index对应
                let dataIndex = target.getAttribute("data-index");
                // 操作的值重新赋值到index，那么index就可以更新
                index = dataIndex;
                imgBoxUl.style.transform = `translateX(-${index}00%)`;
                // 调用小圆点颜色函数

                dotColor(target);
            };

            // 封装小圆点颜色变化函数
            function dotColor(tag) {
                // console.log(tag);
                tag.parentElement.children[lastIndex - 1].classList.remove("dotActive");
                tag.classList.add("dotActive");
                // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
                lastIndex = index;
            };

            // 控制开关
            function flagFn() {
                // 关闭开关
                flag = false;
                imgBoxUl.addEventListener("transitionend", function () {
                    flag = true;
                });
            }

            // 定时器
            timeFn();
            function timeFn() {
                if (timer) {
                    clearInterval(timer);
                }
                timer = setInterval(function () {
                    arrowRightFn(arrow_right);
                }, 3000);
            }

            // 鼠标移入box区域，停止定时器
            box.addEventListener("mouseenter", function () {
                clearInterval(timer);
            });
            // 鼠标移出box区域，开始定时器
            box.addEventListener("mouseleave", function () {
                setTimeout(timeFn, 3000)
            });

            // 检测页面是否切换，切换就停止定时器
            window.addEventListener("visibilitychange", function () {
                if (document.hidden) {
                    clearInterval(timer);
                } else {
                    timeFn();
                }
            });
        },
        {
            "type": "图片"
        }
        );
    </script>

    <!-- <script>       
        ajax("get", "http://studentback.dfbuff.xyz/getMethod", function (res) {
            console.log(res);
        }, {
            "type": "图片"
        }); 
    </script> -->
</body>
</html>